<template>
    <div style="flex-grow: 1" class="wall">
        <div class="flex function-box">
            <div class="flex search-box">
                <a-button @click="handleShowTalk" style="color: #3070ff" type="primary" ghost :icon="h(PlusOutlined)">
                    添加话术
                </a-button>
                <Search :width="200" placeholder="请输入关键词" />
                <a-input-group compact>
                    <a-select v-model:value="value17" style="width: 152px" placeholder="请选择类型">
                        <a-select-option value="Home">选项1</a-select-option>
                        <a-select-option value="Company">选项2</a-select-option>
                    </a-select>
                </a-input-group>
                <a-input-group compact>
                    <a-select v-model:value="value18" style="width: 152px" placeholder="请选择标签">
                        <a-select-option value="Home">选项1</a-select-option>
                        <a-select-option value="Company">选项2</a-select-option>
                    </a-select>
                </a-input-group>
            </div>
            <div class="flex batch-box" v-if="!batch">
                <a-button @click="setBatch('set')">批量管理</a-button>
                <a-button>标签管理</a-button>
            </div>
            <div class="flex batch-box" v-else>
                <a-button @click="setBatch('all')" :icon="h(CheckOutlined)"> 全选 </a-button>
                <a-button @click="setBatch('merge')" :icon="h(DeploymentUnitOutlined)"> 合并 </a-button>
                <a-button @click="setBatch('delete')" :icon="h(DeleteOutlined)"> 删除 </a-button>
                <a-button @click="setBatch('set')">取消管理</a-button>
            </div>
        </div>
        <div class="container">
            <div class="content">
                <Document
                    :batch="batch"
                    :materialList="materialList"
                    @collect="onClean"
                    @clickFunction="clickFunction"
                    @clickMaterial="clickMaterial"
                />
            </div>
        </div>
    </div>
    <PopupRight ref="RefChild" :formList="popupMessage" />
    <MaterialContent :fodderContent="fodderContent" />
</template>

<script setup lang="ts">
import {ref, h, onMounted} from "vue";
import {Content, PopupRight, Document} from "@/components";
import MaterialContent from "@/pages/WeChat/components/MaterialContent.vue";
import img from "@/assets/image/ChhWJWYeFSeAUOXQAAHGo-hjQxY18..jpg";
import img1 from "@/assets/image/excel.png";
import img2 from "@/assets/image/6ff4305d23.jpg";
import {PlusOutlined, DeleteOutlined, DeploymentUnitOutlined, CheckOutlined} from "@ant-design/icons-vue";
const value17 = ref<string[]>([]);
const value18 = ref<string[]>([]);
const RefChild = ref(); // 添加话术组件
const fodderContent = ref({
    name: "",
    time: "",
    clean: false,
    batchSelect: false,
    prompt: "",
    label: "",
    amount: 0,
    id: 0,
    type: "",
    content: [],
    functionList: [],
});
/**
 * @type 类型:
 * link: 链接
 * text: 文本
 * img: 图片
 * video: 视频
 * file: 文件
 * miniProgram: 小程序
 * media:视频号
 */
const materialList = ref([
    {
        name: "测测试数据测试数据测试数据测试数据测试数据测试数据试数据",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 1,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        type: "link",
        content: [
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
        amount: 1,
    },
    {
        name: "樊逸炜",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 2,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "file",
        content: [
            {
                img: img1,
                type: "file",
                title: "上1海移动选号服务（小程序）",
                subheading: "号码更靓，搜索更佳",
            },
            {
                img: img1,
                type: "file",
                title: "上1海移动选号服务（小程序）",
                subheading: "号码更靓，搜索更佳",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
    {
        name: "测测试数据测试数据测试数据测试数据测试数据测试数据试数据",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 33,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "link",
        content: [
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
    {
        name: "文本格式",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 3,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "text",
        content: [
            {
                img: "",
                type: "text",
                title: "https://sqJ4fEDuu2TXE1ihGfw5jtqxhDKC7NyAF7EU%25252F3vsr53D",
                subheading: "",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
    {
        name: "测测试数据测试数据测试数据测试数据测试数据测试数据试数据",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 41,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "link",
        content: [
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
    {
        name: "图片格式",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 4,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "img",
        content: [
            {
                img: img2,
                type: "img",
                title: "",
                subheading: "",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
    {
        name: "测测试数据测试数据测试数据测试数据测试数据测试数据试数据",
        batchSelect: false,
        time: "2019-08-30 15:47",
        id: 5,
        clean: true,
        prompt: "开启自动清理的情况下，带星标的素材不会被自动清理",
        label: "标签",
        amount: 1,
        type: "link",
        content: [
            {
                img: img,
                type: "link",
                title: "上1海移动选号服测试数据测试数据务（小程序）",
                subheading: "号码更靓，搜索更佳号码更靓，搜索更佳号码更靓，搜索更佳",
            },
        ],
        functionList: [
            {
                name: "群发",
                genre: "send",
            },
            {
                name: "编辑",
                genre: "edit",
            },
            {
                name: "复制",
                genre: "copy",
            },
            {
                name: "合并",
                genre: "merge",
            },
            {
                name: "删除",
                genre: "danger",
            },
        ],
    },
]);
//批量修改
const batch = ref(false);
const setBatch = res => {
    if (res === "set") {
        batch.value = !batch.value;
    } else if (res === "all") {
        if (materialList.value.some(r => !r.batchSelect)) {
            materialList.value.map(it => {
                it.batchSelect = true;
            });
        } else {
            materialList.value.map(it => {
                it.batchSelect = false;
            });
        }
    } else if (res === "delete") {
        for (let i = materialList.value.length - 1; i >= 0; i--) {
            if (materialList.value[i].batchSelect) {
                materialList.value.splice(i, 1); // 删除元素
            }
        }
    }

    console.log(res, "批量管理");
};
//点击清除
const onClean = res => {
    let it = materialList.value.find(it => it.id === res.id);
    it.clean = !it.clean;
};
//点击编辑，群发等
const clickFunction = ({res, it}) => {
    console.log("点击了功能", res, it);
};

// 表格
const handleShowTalk = () => {
    RefChild.value.showDrawer();
};
// 分割
//点击素材
const clickMaterial = res => {
    let it = materialList.value.find(it => it.id === res.id);
    if (batch.value) {
        it.batchSelect = !it.batchSelect;
    } else {
        fodderContent.value = it;
        console.log(fodderContent.value, "点击素材");
    }
};
const popupMessage = [
    {
        title: "素材标题",
        type: "input",
        key: "title",
        placeholder: "请输入素材标题",
        disabled: false,
    },
    {
        title: "素材标签",
        type: "input",
        key: "title",
        placeholder: "请输入素材标题",
        disabled: false,
    },
    {
        title: "话术内容",
        type: "component",
        key: "verbalTrick",
        disabled: false,
        val: "",
        component: Content,
    },
    {
        type: "button",
        val: "",
        leading: "提交",
        auxiliary: "重置",
    },
];

// 生命周期
onMounted(() => {
    // 这里可以执行任何初始化操作
    materialList.value.map(it => {
        return (it.amount = it.content.length);
    });
});
</script>

<style scoped lang="less">
.wall {
    display: flex;
    flex-direction: column;
}
.function-box {
    background-color: #fff;
    padding: 12px;
    .search-box {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        .ant-input-group {
            width: 152px;
        }
        .ant-btn {
            color: #666;
        }
    }
    .batch-box {
        gap: 12px;
    }
}
.container {
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto; /* 超出时显示垂直滚动条 */
    flex-grow: 1;
    .content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        align-content: flex-start;
    }
}
</style>
